import React, { useState, useEffect } from 'react';
import { ImagePicker as Picker } from './base';
import { FormListItem } from '@/components/form-group/interface';

interface FileType {
  id: string;
  url: string;
  size?: number;
  type?: string;
}

const ImagePicker: React.FC<FormListItem> = (props) => {
  const [receiveData, setReceiveData] = useState<string[]>([]);

  useEffect(() => {
    const list = props.value || [];
    setReceiveData(list);
  }, [props.value]);

  const onChange = (value: any) => {
    props.onChange(value.map((item: FileType) => item.id));
  };

  return (
    <div>
      <Picker
        name={props.label}
        onChange={onChange}
        receiveData={receiveData}
      />
    </div>
  );
};

export default ImagePicker;